/**
 * @description 登录
 * @author xfj
 */

import { Button, Checkbox, Form, Input } from 'antd';
import { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom'
import { setStorage } from '../../utils/localstore'
import useLoginInfo from '../../hooks/useLoginInfo'
import { LocalStorageKey } from '../../constants/user'

function Login() {
  const isLogin = useLoginInfo()
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  const onFinish = (values) => {
    console.log('Success:', values);
    setStorage(LocalStorageKey, values);
    const go = searchParams.get('go');
    navigate(go || '/')
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  useEffect(() => {
    if(isLogin) {
      navigate('/')
    }
  }, [])
  
  return (
    <div style={{
      position: "absolute", 
      left: "50%", 
      top: "50%", 
      transform: "translate(-50%, -50%)",
    }}>
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="Username"
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your username!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Login;
